<template>
  <div class="quotation-view">
    <!-- tab 容器 -->
    <div class="tab-wrap">
      <el-radio-group v-model="tabValue">
        <el-radio-button v-for="item in tabsList" :key="item.value" :label="item.value">
          <template #default>
            {{ item.name }}
            <span v-if="item.value == 0">
              ({{
                privateTableDataNum +
                stockUpTableDataNum +
                unmatchedTableDataNum +
                mailTableDataNum +
                notPostedTableDataNum
              }})
            </span>
            <span v-if="item.value == 1">({{ privateTableDataNum }})</span>
            <span v-if="item.value == 2">({{ stockUpTableDataNum }})</span>
            <span v-if="item.value == 3">({{ unmatchedTableDataNum }})</span>
            <span v-if="item.value == 4">({{ mailTableDataNum }})</span>
            <span v-if="item.value == 5">({{ notPostedTableDataNum }})</span>
          </template>
        </el-radio-button>
      </el-radio-group>
    </div>
    <PrivateLibraryView
      :fileId="fileId"
      @getTableData="getTableData"
      ref="privateRef"
      :bomData="privateTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getPrivateTotal="getPrivateTotal"
      @openModal="openModal"
      :tabValue="tabValue"
      v-if="tabValue == 1"
    />
    <StockUpView
      ref="stockUpRef"
      :bomData="stockUpTableData"
      @getTableData="getTableData"
      :fileId="fileId"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getStockUpTotal="getStockUpTotal"
      v-if="tabValue == 2"
      :tabValue="tabValue"
    />
    <Unmatched
      ref="unmatchedRef"
      :fileId="fileId"
      @getTableData="getTableData"
      :bomData="unmatchedTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getUnmatchedTotal="getUnmatchedTotal"
      v-if="tabValue == 3"
      :tabValue="tabValue"
    />
    <MailView
      ref="mailRef"
      :fileId="fileId"
      @getTableData="getTableData"
      :bomData="mailTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getMailTotal="getMailTotal"
      v-if="tabValue == 4"
      :tabValue="tabValue"
    />
    <NotAttached
      ref="notPostedRef"
      :fileId="fileId"
      @getTableData="getTableData"
      :bomData="notPostedTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getNotPostedTotal="getNotPostedTotal"
      v-if="tabValue == 5"
      :tabValue="tabValue"
    />
    <div v-show="tabValue == 0">
      <PrivateLibraryView
        ref="privateRef"
        :fileId="fileId"
        @getTableData="getTableData"
        :bomData="privateTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getPrivateTotal="getPrivateTotal"
        @openModal="openModal"
        :tabValue="tabValue"
      />
      <StockUpView
        ref="stockUpRef"
        @getTableData="getTableData"
        :bomData="stockUpTableData"
        :fileId="fileId"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getStockUpTotal="getStockUpTotal"
        :tabValue="tabValue"
      />
      <Unmatched
        ref="unmatchedRef"
        :fileId="fileId"
        @getTableData="getTableData"
        :bomData="unmatchedTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getUnmatchedTotal="getUnmatchedTotal"
        :tabValue="tabValue"
      />
      <MailView
        ref="mailRef"
        :fileId="fileId"
        @getTableData="getTableData"
        :bomData="mailTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getMailTotal="getMailTotal"
        :tabValue="tabValue"
      />
      <NotAttached
        ref="notPostedRef"
        :fileId="fileId"
        @getTableData="getTableData"
        :bomData="notPostedTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getNotPostedTotal="getNotPostedTotal"
        :tabValue="tabValue"
      />
    </div>
  </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const tabValue = ref(0);
let privateTableData = reactive([]); // 私有
let stockUpTableData = reactive([]); // IBE
let unmatchedTableData = reactive([]); // 未匹配
let mailTableData = reactive([]); // 邮寄
let notPostedTableData = reactive([]); // 不贴
let privateTableDataNum = ref(0);
let stockUpTableDataNum = ref(0);
let unmatchedTableDataNum = ref(0);
let mailTableDataNum = ref(0);
let notPostedTableDataNum = ref(0);
let allTotal = ref(0);
allTotal.value =
  Number(privateTableDataNum.value) +
  Number(stockUpTableDataNum.value) +
  Number(unmatchedTableDataNum.value) +
  Number(mailTableDataNum.value) +
  Number(notPostedTableDataNum.value);
const tabsList = computed(() => [
  {
    name: t('om.All'),
    value: 0,
    num: allTotal.value,
  },
  {
    name: t('menu.privateInventory'),
    value: 1,
    num: privateTableDataNum.value,
  },
  {
    name: t('om.IBEstocking'),
    value: 2,
    num: stockUpTableDataNum.value,
  },
  {
    name: t('om.Unmatched'),
    value: 3,
    num: unmatchedTableDataNum.value,
  },
  {
    name: t('om.Postagerequired'),
    value: 4,
    num: mailTableDataNum.value,
  },
  {
    name: t('om.Notsticker'),
    value: 5,
    num: notPostedTableDataNum.value,
  },
]);
</script>
